<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>登录/注册</title>
    <link rel="stylesheet" href="/public/css/style.css">
    <style>
        body {
            background: url(/public/images/bg/bg06.jpg) top center / cover no-repeat;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="dowebok" id="dowebok">
        <div class="form-container sign-up-container">
            <form action="/register" method="post" id="register_form">
                <h1>注册</h1>
                <br>
                <input type="email" placeholder="电子邮箱" name="email">
                <input type="text" placeholder="昵称" name="nickname">
                <input type="text" placeholder="地址" name="address">
                <input type="text" placeholder="手机" name="cellphone">
                <input type="password" placeholder="密码" name="password">
                <button type="submit">注册</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="/login" method="post" id="login_form">
                <h1>登录</h1>
                <br>
                <input type="email" placeholder="电子邮箱" name="email">
                <input type="password" placeholder="密码" name="password">
                <a href="JavaScript:;" id="cell_admin">忘记密码？</a>
                <button type="submit">登录</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有帐号？</h1>
                    <p>请使用您的帐号进行登录</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有帐号？</h1>
                    <p>立即注册,享用美食吧！！！</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/public/js/index.js"></script>
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>

    <script>
        //  注册ajax请求
        $('#register_form').on('submit', function (e) {
            e.preventDefault()
            var formData = $(this).serialize()
            $.ajax({
                url: '/register',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.alert('注册成功！')
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/'
                    } else if (err_code === 1) {
                        window.alert('邮箱或者昵称已存在！')
                    } else if (err_code === 2) {
                        window.alert('昵称已存在！')
                    } else if (err_code === 500) {
                        window.alert('服务器忙，请稍后重试！')
                    }
                    console.log(data);
                }
            })
        })

        // 登录ajax请求
        $('#login_form').on('submit', function (e) {
            e.preventDefault()
            var formData = $(this).serialize()
            // console.log(formData)
            $.ajax({
                url: '/login',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/'
                    } else if (err_code === 1) {
                        window.alert('邮箱或者密码错误')
                    } else if (err_code === 500) {
                        window.alert('服务器忙，请稍后重试！')
                    }
                }
            })
        })

        $('#cell_admin').on('click',function () {
            window.alert('请联系管理员~')
          })

    </script>

</body>

</html>